[Notes] Web Application Basic

Posted on | In
Symbols count in article: 2.7k | Reading time ≈ 2 mins.

Web Application

Dependencies:

  1. Java 8
  2. Eclipse EE
  3. Postman
  4. Tomcat

Web Application: Clients ->Internet-> Server

  • Server(Backend)
  • Client(Frontend): User interface
  • Internet

TCP/IP区别：

  • IP对应特定机器的地址，TCP对应特定机器特定进程的地址
  • TCP通过端口来监听请求，请求包括IP和端口号

在浏览器输入www.example.com会发生什么？

  1. (client) client opens browser and goes to an Internet address (IP address/URL/hostname) and asks for page for (http://www.example.com), which means “I want to see ‘http://www.example.com/index.html’”
  2. (network) Internet redirects your request “I want to see ‘http://www.example.com’” to example’s server (a set of web servers)
  3. (server) One of example’s server sends a response to your Internet address (ip address). The response contains a HTML page. We will talk about HTML later.
  4. (network) The response goes through the Internet and received by your browser.
  5. (client) Your browser receives the response from example’s server and the HTML page contained in it. Render the page view and present to you. How to view the HTML page source? (Right click, and view page source)

如何设计web app? 三层结构

  1. presentation tier 直接与用户交互
  2. logic tier 应用具体的逻辑
  3. data tier 数据库

Tomcat 提供web server

  1. RPC(remote procedure call) 调用一个远端机器上的API
  2. Java Servlet 服务器端负责处理RPC的java class
  3. Tomcat 存放servlet的环境，负责接受请求并分配到对应的servlet处理,把处理的结果传给正确的客户

Tomcat配置

  1. 在properties里面点一下switch location找配置文件
  2. server location改成 use tomcat installation
  3. 地址localhost:8080

Http request methods

  1. GET(read in general)
  2. POST(write in general)
  3. PUT(write)
  4. DELETE(write)

URL(Unique Resource Locator)

  1. format: 

    1
    2
    3
    4
    5
    6
    + protocal(http/https)
    + hostname(www.youtube.com)
    + port(8080): which process
    + endpoint: The name and location of the requested resource, under the server base directory. 相当于要触发的服务或功能
    + query: separated from the preceding part by a question mark (?), containing a query string of attribute–value pairs separated by a delimiter. 相当于参数
    + example: ```https://www.youtube.com/results?search_query=example

    • example: 

      1
      2. url会自动将空格转码成```"20%"

    • 如果要inplace操作的话，先扫一遍找出空格数，然后再扩容字符串，然后冲后往前填。

http request body: 包含http request的数据

  • POST的body信息通常是隐藏的,GET通常没有必要隐藏

  • request例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    JSON(JavaScript Object Notation)
    {
    “instructor”: 
    {
        "company": "Laioffer",
        "course": “Project” ,
        "name": “Vincent”
    }  
    }

    // Alternative formats

    XML: eXtensible Markup Language
    <instructor>
    <company>Laioffer</company>
    <course>Project</course>
    <name>Vincent</name>
    </instructor>


    ProtocolBuffer
    Instructor {
    company = “Laioffer”,
    course= “Project”
    name= “Vincent”
    }

  • JSON简洁一些，xml长一些，ProtocalBuffer更新效率更高。前两种都是字符串，后一种是java class，相当于二进制文件，需要额外支持。